/**
 * Created by MingIr on 2017/1/19.
 * @author:bjzhang
 */
import React,{ Component } from 'react';
import {
    View,
    ScrollView,
    StyleSheet,
    Text,
    Image,
    Dimensions,
    TouchableOpacity
} from 'react-native';

import PHead from '../module/header';
import renderIf from '../module/renderIf';
const { width } = Dimensions.get('window');
export default class FindVideoDetail extends Component{
    constructor(props){
        super(props);
    }
    payVideo(){
        this.props.navigation.navigate('VideoPlayer',{ url: this.videourl });
    }
    componentWillUnmount(){
        // console.log('goback');
        let { params } = this.props.navigation.state;
        typeof params.refresh == 'function' && params.refresh();
    }
    render(){
        let { params } = this.props.navigation.state;
        let bag = params.bag;
        this.videourl = bag.video;
        return(
            <View style={[styles.container,styles.flexStart]}>
                <PHead title="视频" onBackEvent={()=>{ this.props.navigation.goBack();}}  leftIcon={require('../../icon/camera/camera_icon_back.png')} rightIcon={require('../../icon/btn/btn_wechat.png')}/>
                <ScrollView style={[styles.container,styles.containerPadding]}>
                    <View style={[styles.headingWrap]}>
                        <View style={styles.headingWrap}>
                            <Image style={styles.headerImg} source={{uri:bag.avatar,method:'GET',header:{ Pragma:'no-cache'},body:'暂无'}}></Image>
                            <Text style={styles.nickNameTx}>{bag.nickName}</Text>
                        </View>
                        <Text style={styles.timeTx}>{bag.createTime}</Text>
                    </View>
                    <View>
                        <Image style={styles.coverImage} resizeMode={Image.resizeMode.cover} source={{uri:bag.cover}}>
                            <View style={styles.coverLayout}>
                                <TouchableOpacity activeOpacity={.7} onPress={this.payVideo.bind(this)}><Image source={require('../../icon/btn/btn_play_big.png')}/></TouchableOpacity>
                            </View>
                        </Image>
                        <Text style={styles.contentTx}>
                            {bag.content}
                        </Text>
                    </View>
                    <View style={styles.likeWrap}>
                        <Image style={styles.likeImage}
                               resizeMode={Image.resizeMode.contain}
                               source={require('../../icon/common/icon_like_pressed.png')}/>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:'column',
        backgroundColor:'#fff',
    },
    containerPadding:{
        paddingLeft:15,
        paddingRight:15,
        paddingTop:10,
    },
    spaceBetween:{
        justifyContent:'space-between',
    },
    flexStart:{
        justifyContent:'flex-start',
    },
    headingWrap:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
    },
    headerImg:{
        width:29,
        height:29,
        borderRadius:29,
        overlayColor:'transparent',
    },
    nickNameTx:{
        fontSize:15,
        color:'#8C959F',
        marginLeft:10,
    },
    timeTx:{
        color:'#8C959F',
        fontSize:12,
    },
    coverImage:{
        marginTop:22,
        height:280,
        width:(width - 30),
    },
    contentTx:{
        marginTop:10,
        fontSize:15,
        color:'#8C959F'
    },
    likeWrap:{
        alignItems:'center',
        marginTop:47,
        marginBottom:40,
    },
    likeImage:{
        width:49,
        height:49,
    },
    coverLayout:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'rgba(0,0,0,.2)',
    },
    videoPlay:{
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    }
});